Чи можна перемикати видимість елемента, використовуючи функції .hide (), .show () або .toggle ()?
Як би ви перевірили, чи є елемент видимим чи прихованим?
2020-12-07 21:54:31
1
2
Далі
Оскільки питання стосується одного елемента, цей код може бути більш підходящим:
// Перевіряє вміст CSS для відображення: [none | block], ігнорує видимість: [true | false]
$ (елемент) .is (": видимий");
// Те саме працює з прихованим
$ (елемент) .is (": прихований");
Це те саме, що пропозиція twernt, але застосовується до одного елемента; і він відповідає алгоритму, рекомендованому в FAQ по jQuery.
Ми використовуємо jQuery's is (), щоб перевірити вибраний елемент за допомогою іншого елемента, селектора або будь-якого об’єкта jQuery. Цей метод проходить уздовж елементів DOM, щоб знайти відповідність, яка задовольняє переданому параметру. Це поверне істину, якщо є збіг, інакше поверне false.
|
Ви можете використовувати прихований селектор:
// Відповідає всім прихованим елементам
$ ('елемент: прихований')
І видимий селектор:
// Відповідає всім елементам, які видно
$ ('елемент: видимий')
|
if ($ (element) .css ('display') == 'none' || $ (element) .css ("visibility") == "hidden") {
// 'елемент' приховано
}
Вищевказаний метод не враховує видимість батьків. Щоб розглянути і батьківського, слід використовувати .is (": прихований") або .is (": видимий").
Наприклад,
Div2
Вищевказаний метод вважатиме div2 видимим, а: видимим - ні. Але вищезазначене може бути корисним у багатьох випадках, особливо коли вам потрібно знайти, чи є якісь помилки div видимими у прихованому батькові, оскільки в таких умовах: visible не працюватиме.
|
Жодна з цих відповідей не стосується того, що, на мою думку, є питанням, саме те, що я шукав: "Як я обробляю елементи, які мають видимість: приховано?" Ні: visible, ні: hidden не впораються з цим, оскільки вони обидва шукають відображення відповідно до документації. Наскільки я міг визначити, немає селектора для обробки видимості CSS. Ось як я це вирішив (стандартні селектори jQuery, може бути більш стислий синтаксис):
$ (". item"). each (function () {
if ($ (this) .css ("visibility") == "hidden") {
// обробляти невидимий стан
} ще {
// обробляти видимий стан
}
});
|
З Як мені визначити стан переключеного елемента?
Ви можете визначити, згорнутий елемент чи ні, за допомогою селекторів: visible і: hidden.
var isVisible = $ ('# myDiv'). is (': visible');
var isHidden = $ ('# myDiv'). is (': прихований');
Якщо ви просто дієте на елемент на основі його видимості, ви можете просто включити: visible або: hidden у вираз селектора. Наприклад:
$ ('# myDiv: visible'). animate ({left: '+ = 200px'}, 'slow');
|
Часто перевіряючи, чи щось видно чи ні, ви збираєтеся негайно йти вперед і робити щось інше з цим. jQuery ланцюжок полегшує це.
Отже, якщо у вас є селектор і ви хочете виконати якусь дію над ним, лише якщо він видимий або прихований, ви можете використовувати filter (": visible") або filter (": hidden") з подальшим зв’язуванням його з дією, яку ви хочете приймати.
Отже, замість оператора if, наприклад:
якщо ($ ('# btnUpdate'). is (": visible"))
{
$ ('# btnUpdate'). animate ({width: "toggle"}); // Кнопка приховати
}
Або більш ефективний, але ще потворніший:
кнопка var = $ ('# btnUpdate');
якщо (button.is (": видно"))
{
button.animate ({width: "toggle"}); // Кнопка приховати
}
Ви можете зробити все це в один рядок:
$ ('# btnUpdate'). filter (": visible"). animate ({width: "toggle"});
|
Селектор: visible відповідно до документації jQuery:
Вони не мають значення CSS для відображення.
Вони є елементами форми з type = "hidden".
Їх ширина та висота явно встановлені на 0.
Елемент предка прихований, тому елемент не відображається на сторінці.
Елементи з видимістю: прихована або непрозорість: 0 вважаються видимими, оскільки вони все ще займають місце в макеті.
Це корисно в одних випадках, а в інших марно, оскільки якщо ви хочете перевірити, чи видно елемент (display! = None), ігноруючи видимість батьків, ви виявите, що .css ("display") == 'none 'не тільки швидше, але й правильно поверне перевірку видимості.
Якщо ви хочете перевірити видимість замість дисплея, вам слід використовувати: .css ("видимість") == "приховано".
Також враховуйте додаткові примітки jQuery:
Оскільки: visible є розширенням jQuery, а не є частиною специфікації CSS, запити, що використовують: visible, не можуть скористатися підвищенням продуктивності, передбаченим власним методом DOM querySelectorAll (). Для досягнення найкращої продуктивності при використанні: visible для виділення елементів, спочатку виділіть елементи, використовуючи чистий CSS-селектор, а потім використовуйте .filter (": visible").
Крім того, якщо вас турбує продуктивність, вам слід перевірити Тепер ви бачите мене ... показати / приховати продуктивність (04.05.2010). І використовуйте інші методи для показу та приховування елементів.
|
Це працює для мене, і я використовую show () і hide (), щоб зробити свій div прихованим / видимим:
if ($ (this) .css ('display') == 'none') {
/ * ваш код йде сюди * /
} ще {
/ * альтернативна логіка * /
}
|
Як працює видимість елемента та jQuery;
Елемент можна приховати за допомогою display: none,видимість: прихована або непрозорість: 0. Різниця між цими методами:
display: ніхто не приховує елемент, і він не займає місця;
видимість: прихований приховує елемент, але він все одно займає місце в макеті;
opacity: 0 приховує елемент як "видимість: прихований", і він все одно займає місце в макеті; єдина відмінність полягає в тому, що непрозорість дозволяє зробити елемент частково прозорим;
if ($ ('. target'). is (': hidden')) {
$ ('. target'). show ();
} ще {
$ ('. target'). hide ();
}
if ($ ('. target'). is (': visible')) {
$ ('. target'). hide ();
} ще {
$ ('. target'). show ();
}
if ($ ('. target-visibility'). css ('visibility') == 'hidden') {
$ ('. target-visibility'). css ({
видимість: "видно",
дисплей: ""
});
} ще {
$ ('. target-visibility'). css ({
видимість: "приховано",
дисплей: ""
});
}
if ($ ('. target-visibility'). css ('opacity') == "0") {
$ ('. target-visibility'). css ({
непрозорість: "1",
дисплей: ""
});
} ще {
$ ('. target-visibility'). css ({
непрозорість: "0",
дисплей: ""
});
}
Корисні методи перемикання jQuery:
$ ('. click'). click (function () {
$ ('. target'). toggle ();
});
$ ('. click'). click (function () {
$ ('. target'). slideToggle ();
});
$ ('. click'). click (function () {
$ ('. target'). fadeToggle ();
});
|
Ви також можете зробити це за допомогою простого JavaScript:
функція isRendered (domObj) {
if ((domObj.nodeType! = 1) || (domObj == document.body)) {
повернути істинно;
}
if (domObj.currentStyle && domObj.currentStyle ["display"]! = "none" && domObj.currentStyle ["visibility"]! = "hidden") {
повернення isRendered (domObj.parentNode);
} ще якщо (window.getComputedStyle) {
var cs = document.defaultView.getComputedStyle (domObj, null);
if (cs.getPropertyValue ("display")! = "none" && cs.getPropertyValue ("visibility")! = "hidden") {
повернення isRendered (domObj.parentNode);
}
}
повернути false;
}
Примітки:
Працює скрізь
Працює для вкладених елементів
Працює для CSS та вбудованих стилів
Не вимагає фреймворку
|
Я б використовував клас CSS .hide {display: none! Important; }.
Для приховування / показу я називаю .addClass ("приховати") /. RemoveClass ("приховати"). Для перевірки видимості я використовую .hasClass ("сховати").
Це простий і зрозумілий спосіб перевірити / приховати / показати елементи, якщо ви не плануєте використовувати методи .toggle () або .animate ().
|
Демо-посилання
$ ('# clickme'). click (function () {
$ ('# book'). toggle ('повільний', function () {
// Анімація завершена.
попередження ($ ('# book'). is (": visible")); // <--- TRUE, якщо видимий False, якщо прихований
});
});
Натисніть тут
Джерело:
Blogger Plug n Play - Інструменти та віджети jQuery: Як перевірити, прихований чи видимий елемент за допомогою jQuery
|
Можна просто використовувати прихований або видимий атрибут, наприклад:
$ ('елемент: прихований')
$ ('елемент: видимий')
Або ви можете спростити те саме за допомогою наступного.
$ (елемент) .is (": видимий")
|
ebdiv має бути встановлений стиль = "display: none;". Це працює як для показу, так і для приховування:
$ (документ) .ready (function () {
$ ("# eb"). клацніть (function () {
$ ("# ebdiv"). toggle ();
});
});
|
Ще одна відповідь, яку ви повинні врахувати, - якщо ви приховуєте елемент, ви повинні використовувати jQuery, але замість того, щоб насправді приховувати його, ви видаляєте весь елемент, але копіюєте його вміст HTML і сам тег у змінну jQuery, а потім все, що вам потрібно зробити, це перевірити, чи є такий тег на екрані, використовуючи звичайний if (! $ ('# thetagname'). length).
|
При тестуванні елемента проти: hidden selector у jQuery слід враховувати, що абсолютний позиціонований елемент може бути розпізнаний як прихований, хоча їх дочірні елементи видно.
По-перше, це здається дещо протиречувальним - хоча детальніший розгляд документації jQuery дає відповідну інформацію:
Елементи можна вважати прихованими з кількох причин: [...] Їх ширина та висота явно встановлені на 0. [...]
Отже, це насправді має сенс щодо box-моделі та обчислюваного стилю для елемента. Навіть якщо для ширини та висоти не встановлено явно 0, вони можуть встановлюватися неявно.
Погляньте на наступний приклад:
console.log ($ ('. foo'). is (': hidden')); // правда
console.log ($ ('. bar'). is (': hidden')); // помилковий
.foo {
позиція: абсолютна;
ліворуч: 10 пікселів;
зверху: 10 пікселів;
фон: # ff0000;
}
.bar {
позиція: абсолютна;
ліворуч: 10 пікселів;
зверху: 10 пікселів;
ширина: 20px;
висота: 20px;
фон: # 0000ff;
}
Оновлення для jQuery 3.x:
З jQuery 3 описана поведінка зміниться! Елементи вважатимуться видимими, якщо вони мають будь-які поля компонування, включаючи елементи нульової ширини та / або висоти.
JSFiddle з jQuery 3.0.0-alpha1:
http://jsfiddle.net/pM2q3/7/
Тоді ж код JavaScript матиме такий вивід:
console.log ($ ('. foo'). is (': hidden')); // помилковий
console.log ($ ('. bar'). is (': hidden'));// помилковий
|
Це може спрацювати:
очікуйте ($ ("# message_div"). css ("display")). toBe ("none");
|
Приклад:
$ (документ) .ready (function () {
if ($ ("# checkme: hidden"). length) {
console.log ('Прихований');
}
});
|
Щоб перевірити, чи не видно, я використовую!:
if (! $ ('# book'). is (': visible')) {
alert ('# книги не видно')
}
Або наступне також це сам, зберігаючи селектор jQuery у змінній, щоб мати кращу продуктивність, коли це потрібно кілька разів:
var $ book = $ ('# книга')
if (! $ book.is (': visible')) {
alert ('# книги не видно')
}
|
Використовуйте перемикання класів, а не редагування стилю. . .
Використання класів, призначених для "приховування" елементів, є простим, а також одним з найбільш ефективних методів. Перемикання класу "прихований" зі стилем відображення "none" буде виконуватися швидше, ніж редагування цього стилю безпосередньо. Деякі з цього я досить детально пояснив у запитанні про переповнення стека, перетворюючи два елементи, видимі / приховані в одному і тому ж div.
Найкращі практики та оптимізація JavaScript
Ось справді просвітницьке відео Google Tech Talk від інженера-розробника Google Ніколаса Закаса:
Прискоріть свій Javascript (YouTube)
|
Приклад використання видимої перевірки для блокувальника реклами:
$ (документ) .ready (function () {
if (! $ ("# ablockercheck"). is (": видно"))
$ ("# ablockermsg"). text ("Будь ласка, відключіть adblocker."). show ();
});
"ablockercheck" - це ідентифікатор, який блокує adblocker. Отже, перевіривши, чи є воно видимим, ви зможете визначити, чи ввімкнено блокувальник реклами.
|
Зрештою, жоден із прикладів мене не влаштовує, тому я написав свій.
Тести (без підтримки фільтра Internet Explorer: альфа):
а) Перевірте, чи не прихований документ
b) Перевірте, чи має елемент нульову ширину / висоту / непрозорість або відображення: немає / видимість: приховано у вбудованих стилях
в) Перевірте, чи центр (також тому, що це швидше, ніж тестування кожного пікселя / кута) елемента, не прихований іншим елементом (і всіма предками, приклад: переповнення: прихований / прокрутка / один елемент над іншим) або краї екрана
г) Перевірте, чи має елемент нульову ширину / висоту / непрозорість або відображення: немає / видимість: приховано в обчислюваних стилях (серед усіх предків)
Перевірено на
Android 4.4 (власний браузер / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (Internet Explorer 5-11 режими документа + Internet Explorer 8 на віртуальна машина) та Safari (Windows / Mac / iOS).
var is_visible = (function () {
var x = window.pageXOffset? window.pageXOffset + window.innerWidth - 1: 0,
y = window.pageYO offset? window.pageYOffset + window.innerHeight - 1: 0,
відносна = !! ((! x &&! y) ||! document.elementFromPoint (x, y));
функція всередині (дитина, батько) {
в той час як (дитина) {
якщо (дитина === батько) повертає true;
дитина = дитина.
}
повернути false;
};
функція повернення (elem) {
якщо (
документ. прихований ||
elem.offsetWidth == 0 ||
elem.offsetHeight == 0 ||
elem.style.visibility == 'прихований' ||
elem.style.display == 'none' ||
elem.style.opacity === 0
) повернути false;
var rect = elem.getBoundingClientRect ();
якщо (відносно) {
if (! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2, rect.top + elem.offsetHeight / 2), elem)) return false;
} ще якщо (
! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2 + window.pageXOffset, rect.top + elem.offsetHeight / 2 + window.pageYOffset), elem) ||
(
rect.top + elem.offsetHeight / 2 <0 ||
rect.left + elem.offsetWidth / 2 <0 ||
rect.bottom - elem.offsetHeight / 2> (window.innerHeight || document.documentElement.clientHeight) ||
rect.right - elem.offsetWidth / 2> (window.innerWidth || document.documentElement.clientWidth)
)
) повернути false;
if (window.getComputedStyle || elem.currentStyle) {
var el = elem,
comp = нуль;
в той час як (el) {
if (el === документ) {break;} ще if (! el.parentNode) повертає false;
comp = window.getComputedStyle? window.getComputedStyle (el, null): el.currentStyle;
if (comp && (comp.visibility == 'hidden' || comp.display == 'none' || (typeof comp.opacity! == 'undefined' && comp.opacity! = 1))) повернути false;
el = el.parentNode;
}
}
повернути істинно;
}
}) ();
Як користуватись:
is_visible (elem) // логічне значення
|
Вам потрібно перевірити обидва ... Дисплей, а також видимість:
if ($ (this) .css ("display") == "none" || $ (this) .css ("visibility") == "hidden") {
// Елемент не видно
} ще {
// Елемент видно
}
Якщо ми перевіримо наявність $ (this) .is (": visible"), jQuery перевіряє обидві речі автоматично.
|
Можливо, ви можете зробити щось подібне
$ (документ) .ready (function () {
var видимий =$ ('# tElement'). is (': видимий');
якщо (видно) {
оповіщення («видно»);
// Код
}
ще
{
оповіщення ("приховане");
}
});
Ім'я
|
Просто перевірте видимість, перевіривши наявність логічного значення, наприклад:
if (this.hidden === false) {
// Ваш код
}
Я використовував цей код для кожної функції. В іншому випадку ви можете використовувати is (': visible') для перевірки видимості елемента.
|
Оскільки елементи з видимістю: прихований або непрозорістю: 0 вважаються видимими, оскільки вони все ще споживають простір у макеті (як описано для jQuery: visible Selector) - ми можемо перевірити, чи справді елемент видно таким чином:
функція isElementReallyHidden (el) {
повернути $ (el) .is (": приховано") || $ (el) .css ("видимість") == "приховано" || $ (el) .css ('непрозорість') == 0;
}
var booElementReallyShowed =! isElementReallyHidden (someEl);
$ (someEl) .parents (). each (function () {
if (isElementReallyHidden (this)) {
booElementReallyShowed = false;
}
});
|
Але що, якщо CSS елемента схожий на наступний?
.element {
позиція: абсолютна; ліва: -9999;
}
Отже, ця відповідь на запитання щодо переповнення стека Як перевірити, чи є елемент поза екраном, також слід розглянути.
|
Функцію можна створити для того, щоб перевірити наявність атрибутів видимості / відображення, щоб визначити, відображається елемент в інтерфейсі користувача чи ні.
перевірка функціїUIElementVisible (елемент) {
return ((element.css ('display')! == 'none') && (element.css ('visibility')! == 'hidden'));
}
Робоча скрипка
|
Також ось трійковий умовний вираз для перевірки стану елемента, а потім для його перемикання:
$ ('someElement'). on ('click', function () {$ ('elementToToggle'). is (': visible')? $ ('elementToToggle'). hide ('slow'): $ ('elementToToggle ') .show (' повільний ');});
|
if ($ ('# postcode_div'). is (': visible')) {
if ($ ('# postcode_text'). val () == '') {
$ ('# spanPost'). text ('\ u00a0');
} ще {
$ ('# spanPost'). text ($ ('# postcode_text'). val ());
}
|
1
2
Далі
Високоактивне запитання. Заробіть 10 репутації, щоб відповісти на це питання. Вимога про репутацію допомагає захистити це питання від спаму та відсутності відповідей.
Не відповідь, яку ви шукаєте? Перегляньте інші запитання з тегами javascript jquery dom visibility або задайте власне запитання.
Джерело:
Blogger Plug n Play - Інструменти та віджети jQuery: Як перевірити, прихований чи видимий елемент за допомогою jQuery
|
Можна просто використовувати прихований або видимий атрибут, наприклад:
$ ('елемент: прихований')
$ ('елемент: видимий')
Або ви можете спростити те саме за допомогою наступного.
$ (елемент) .is (": видимий")
|
ebdiv має бути встановлений стиль = "display: none;". Це працює як для показу, так і для приховування:
$ (документ) .ready (function () {
$ ("# eb"). клацніть (function () {
$ ("# ebdiv"). toggle ();
});
});
|
Ще одна відповідь, яку ви повинні врахувати, - якщо ви приховуєте елемент, ви повинні використовувати jQuery, але замість того, щоб насправді приховувати його, ви видаляєте весь елемент, але копіюєте його вміст HTML і сам тег у змінну jQuery, а потім все, що вам потрібно зробити, це перевірити, чи є такий тег на екрані, використовуючи звичайний if (! $ ('# thetagname'). length).
|
При тестуванні елемента проти: hidden selector у jQuery слід враховувати, що абсолютний позиціонований елемент може бути розпізнаний як прихований, хоча їх дочірні елементи видно.
По-перше, це здається дещо протиречувальним - хоча детальніший розгляд документації jQuery дає відповідну інформацію:
Елементи можна вважати прихованими з кількох причин: [...] Їх ширина та висота явно встановлені на 0. [...]
Отже, це насправді має сенс щодо box-моделі та обчислюваного стилю для елемента. Навіть якщо для ширини та висоти не встановлено явно 0, вони можуть встановлюватися неявно.
Погляньте на наступний приклад:
console.log ($ ('. foo'). is (': hidden')); // правда
console.log ($ ('. bar'). is (': hidden')); // помилковий
.foo {
позиція: абсолютна;
ліворуч: 10 пікселів;
зверху: 10 пікселів;
фон: # ff0000;
}
.bar {
позиція: абсолютна;
ліворуч: 10 пікселів;
зверху: 10 пікселів;
ширина: 20px;
висота: 20px;
фон: # 0000ff;
}
Оновлення для jQuery 3.x:
З jQuery 3 описана поведінка зміниться! Елементи вважатимуться видимими, якщо вони мають будь-які поля компонування, включаючи елементи нульової ширини та / або висоти.
JSFiddle з jQuery 3.0.0-alpha1:
http://jsfiddle.net/pM2q3/7/
Тоді ж код JavaScript матиме такий вивід:
console.log ($ ('. foo'). is (': hidden')); // помилковий
console.log ($ ('. bar'). is (': hidden'));// помилковий
|
Це може спрацювати:
очікуйте ($ ("# message_div"). css ("display")). toBe ("none");
|
Приклад:
$ (документ) .ready (function () {
if ($ ("# checkme: hidden"). length) {
console.log ('Прихований');
}
});
|
Щоб перевірити, чи не видно, я використовую!:
if (! $ ('# book'). is (': visible')) {
alert ('# книги не видно')
}
Або наступне також це сам, зберігаючи селектор jQuery у змінній, щоб мати кращу продуктивність, коли це потрібно кілька разів:
var $ book = $ ('# книга')
if (! $ book.is (': visible')) {
alert ('# книги не видно')
}
|
Використовуйте перемикання класів, а не редагування стилю. . .
Використання класів, призначених для "приховування" елементів, є простим, а також одним з найбільш ефективних методів. Перемикання класу "прихований" зі стилем відображення "none" буде виконуватися швидше, ніж редагування цього стилю безпосередньо. Деякі з цього я досить детально пояснив у запитанні про переповнення стека, перетворюючи два елементи, видимі / приховані в одному і тому ж div.
Найкращі практики та оптимізація JavaScript
Ось справді просвітницьке відео Google Tech Talk від інженера-розробника Google Ніколаса Закаса:
Прискоріть свій Javascript (YouTube)
|
Приклад використання видимої перевірки для блокувальника реклами:
$ (документ) .ready (function () {
if (! $ ("# ablockercheck"). is (": видно"))
$ ("# ablockermsg"). text ("Будь ласка, відключіть adblocker."). show ();
});
"ablockercheck" - це ідентифікатор, який блокує adblocker. Отже, перевіривши, чи є воно видимим, ви зможете визначити, чи ввімкнено блокувальник реклами.
|
Зрештою, жоден із прикладів мене не влаштовує, тому я написав свій.
Тести (без підтримки фільтра Internet Explorer: альфа):
а) Перевірте, чи не прихований документ
b) Перевірте, чи має елемент нульову ширину / висоту / непрозорість або відображення: немає / видимість: приховано у вбудованих стилях
в) Перевірте, чи центр (також тому, що це швидше, ніж тестування кожного пікселя / кута) елемента, не прихований іншим елементом (і всіма предками, приклад: переповнення: прихований / прокрутка / один елемент над іншим) або краї екрана
г) Перевірте, чи має елемент нульову ширину / висоту / непрозорість або відображення: немає / видимість: приховано в обчислюваних стилях (серед усіх предків)
Перевірено на
Android 4.4 (власний браузер / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (Internet Explorer 5-11 режими документа + Internet Explorer 8 на віртуальна машина) та Safari (Windows / Mac / iOS).
var is_visible = (function () {
var x = window.pageXOffset? window.pageXOffset + window.innerWidth - 1: 0,
y = window.pageYO offset? window.pageYOffset + window.innerHeight - 1: 0,
відносна = !! ((! x &&! y) ||! document.elementFromPoint (x, y));
функція всередині (дитина, батько) {
в той час як (дитина) {
якщо (дитина === батько) повертає true;
дитина = дитина.
}
повернути false;
};
функція повернення (elem) {
якщо (
документ. прихований ||
elem.offsetWidth == 0 ||
elem.offsetHeight == 0 ||
elem.style.visibility == 'прихований' ||
elem.style.display == 'none' ||
elem.style.opacity === 0
) повернути false;
var rect = elem.getBoundingClientRect ();
якщо (відносно) {
if (! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2, rect.top + elem.offsetHeight / 2), elem)) return false;
} ще якщо (
! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2 + window.pageXOffset, rect.top + elem.offsetHeight / 2 + window.pageYOffset), elem) ||
(
rect.top + elem.offsetHeight / 2 <0 ||
rect.left + elem.offsetWidth / 2 <0 ||
rect.bottom - elem.offsetHeight / 2> (window.innerHeight || document.documentElement.clientHeight) ||
rect.right - elem.offsetWidth / 2> (window.innerWidth || document.documentElement.clientWidth)
)
) повернути false;
if (window.getComputedStyle || elem.currentStyle) {
var el = elem,
comp = нуль;
в той час як (el) {
if (el === документ) {break;} ще if (! el.parentNode) повертає false;
comp = window.getComputedStyle? window.getComputedStyle (el, null): el.currentStyle;
if (comp && (comp.visibility == 'hidden' || comp.display == 'none' || (typeof comp.opacity! == 'undefined' && comp.opacity! = 1))) повернути false;
el = el.parentNode;
}
}
повернути істинно;
}
}) ();
Як користуватись:
is_visible (elem) // логічне значення
|
Вам потрібно перевірити обидва ... Дисплей, а також видимість:
if ($ (this) .css ("display") == "none" || $ (this) .css ("visibility") == "hidden") {
// Елемент не видно
} ще {
// Елемент видно
}
Якщо ми перевіримо наявність $ (this) .is (": visible"), jQuery перевіряє обидві речі автоматично.
|
Можливо, ви можете зробити щось подібне
$ (документ) .ready (function () {
var видимий =$ ('# tElement'). is (': видимий');
якщо (видно) {
оповіщення («видно»);
// Код
}
ще
{
оповіщення ("приховане");
}
});
Ім'я
|
Просто перевірте видимість, перевіривши наявність логічного значення, наприклад:
if (this.hidden === false) {
// Ваш код
}
Я використовував цей код для кожної функції. В іншому випадку ви можете використовувати is (': visible') для перевірки видимості елемента.
|
Оскільки елементи з видимістю: прихований або непрозорістю: 0 вважаються видимими, оскільки вони все ще споживають простір у макеті (як описано для jQuery: visible Selector) - ми можемо перевірити, чи справді елемент видно таким чином:
функція isElementReallyHidden (el) {
повернути $ (el) .is (": приховано") || $ (el) .css ("видимість") == "приховано" || $ (el) .css ('непрозорість') == 0;
}
var booElementReallyShowed =! isElementReallyHidden (someEl);
$ (someEl) .parents (). each (function () {
if (isElementReallyHidden (this)) {
booElementReallyShowed = false;
}
});
|
Але що, якщо CSS елемента схожий на наступний?
.element {
позиція: абсолютна; ліва: -9999;
}
Отже, ця відповідь на запитання щодо переповнення стека Як перевірити, чи є елемент поза екраном, також слід розглянути.
|
Функцію можна створити для того, щоб перевірити наявність атрибутів видимості / відображення, щоб визначити, відображається елемент в інтерфейсі користувача чи ні.
перевірка функціїUIElementVisible (елемент) {
return ((element.css ('display')! == 'none') && (element.css ('visibility')! == 'hidden'));
}
Робоча скрипка
|
Також ось трійковий умовний вираз для перевірки стану елемента, а потім для його перемикання:
$ ('someElement'). on ('click', function () {$ ('elementToToggle'). is (': visible')? $ ('elementToToggle'). hide ('slow'): $ ('elementToToggle ') .show (' повільний ');});
|
if ($ ('# postcode_div'). is (': visible')) {
if ($ ('# postcode_text'). val () == '') {
$ ('# spanPost'). text ('\ u00a0');
} ще {
$ ('# spanPost'). text ($ ('# postcode_text'). val ());
}
|
1
2
Далі
Високоактивне запитання. Заробіть 10 репутації, щоб відповісти на це питання. Вимога про репутацію допомагає захистити це питання від спаму та відсутності відповідей.
Не відповідь, яку ви шукаєте? Перегляньте інші запитання з тегами javascript jquery dom visibility або задайте власне запитання.